<template>
  <div class="nav-bar van-hairline--top">
    <ul class="nav-list">
      <router-link  class="nav-list-item active" to="home">
        <i class="nbicon nblvsefenkaicankaoxianban-1"></i>
        <span>首页</span>
      </router-link>
      <router-link  class="nav-list-item" to="category">
        <i class="nbicon nbfenlei"></i>
        <span>分类</span>
      </router-link>
      <router-link  class="nav-list-item" to="cart">
        <van-icon  name="shopping-cart-o" :badge="!cart.count ? '' : cart.count" />
        <span>购物车</span>
      </router-link>
      <router-link  class="nav-list-item" to="user">
        <i class="nbicon nblvsefenkaicankaoxianban-"></i>
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>
<script setup>

import Swiper from '@/components/Swiper.vue'
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
  import { setLocal, getLocal } from '@/common/js/utils'
  import { useRoute, useRouter } from 'vue-router'
  import { useCartStore } from '@/stores/cart'
  import { storeToRefs } from 'pinia'
  // import Nanbear from '@/components/Nanbear.vue'

  const cart = useCartStore()
  const {updateCart} = cart;
  const {count,doubleCount} = storeToRefs(cart);
  console.log(44444444,count, doubleCount, updateCart)
  const router = useRouter();
  const route = useRoute();
  console.log('router...',router,route)

  onMounted(()=>{
    if(getLocal('token')){
      updateCart();
    }
  })

</script>
<style lang="less" >
.nav-bar{
  .nav-list-item{
    .van-badge__wrapper{
      .van-badge--fixed {
        z-index: 1000;
      }
    }
  }
}
</style>
<style lang="less" scoped>
  @import '../common/style/mixin';
  .nav-bar{
    position: fixed;
    bottom: 0px;
    z-index:1000;
    width: 100%;
    height: 50px;
    padding: 5px 0px;
    background: #fff;
    .nav-list{
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .nav-list-item{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        :deep .van-badge__wrappe{
          .van-badge--fixed {
            z-index: 1000;
          }
        }
        
        &.router-link-active {
          color: @primary;
          span{
            color: @primary;
          }
        }
        .nbicon,i{
          font-size: 20px;
          line-height: 24px;
        }
        span{
          font-size: 14px;
          color:#666;
          line-height: 18px;
        }
      }
    }
  }
</style>
